/*
 * @Date         : 2022-03-03 16:27:50
 * @LastEditors  : zu1662
 * @LastEditTime : 2022-03-03 19:14:05
 * @Description  : 系统主题组件
 * 
 * Copyright © 2022 by zu1662, All Rights Reserved. 
 */

import React from 'react'
import { observer } from 'mobx-react-lite'
import { useTranslation } from 'react-i18next'
import { IconSun, IconMoon } from '@douyinfe/semi-icons'
import { Button, Tooltip } from '@douyinfe/semi-ui'
import useTheme from '@/hooks/useTheme'

import './index.less'

const ThemeSet = () => {
  const { t } = useTranslation()
  const [theme, updateTheme] = useTheme()

  return (
    <div className="app-theme" onClick={() => updateTheme()}>
      <Tooltip trigger="hover" content={theme === 'dark' ? t('layout.toLightTheme') : t('layout.toDarkTheme')}>
        <Button type="tertiary" theme="borderless" icon={theme === 'dark' ?  <IconSun /> : <IconMoon />} />
      </Tooltip>
    </div>
  )
}

export default observer(ThemeSet)